<template>
  <el-form :model="form" label-width="120px">
 
                    <JmInput jmname="名称" v-model="form.name"></JmInput>
                    <JmInput jmname="标识" v-model="form.mark"></JmInput>
 	
                    <JmEnum jmname="广告位类型" v-model="form.type" :jv="{1: '图片广告', 2: '多图&幻灯广告', 3: '代码广告'}" jtype="3"  ></JmEnum>
 		
                    <JmInput type="num"  jmname="广告宽度" v-model="form.width"></JmInput>
	
                    <JmInput  type="num"  jmname="广告高度" v-model="form.height"></JmInput>
 			               <JmInput type="textarea" jmname="代码" v-model="form.code" remark="当广告位类型是3代码广告的时候使用"></JmInput>
                    <el-form-item>
                      <el-button type="primary" @click="onSubmit">Create</el-button>
                  
                    </el-form-item>
 
  </el-form>
  </template>
<script>
import JmInput from "../../../components/form/JmInput.vue";
import JmEnum from "../../../components/form/JmEnum.vue";
export default {
  components: { JmInput, JmEnum },
   data() {
    return {
         form: {
                name: '1',
                mark: "1",
                type: 1,
                width: '',
                height:"",
                code:'',
            }, 
    };
  }, 
//在export default中添加即可不用管顺序
    watch: {
       //监听内容
       edit_id() { 
        this.getDataList();
      }
    },
    props: ['edit_id'],
     inject:['handleClose'],
     
  mounted() {
    this.getDataList();
  },
  methods: {
    // 配置信息列表初始化
    async getDataList() {
      try { 
      /*查看单条数据*/
        const find = await this.$api.getAdszonefind({ids:this.edit_id});  
        this.form.code=find.code; 
        this.form.height=find.height; 
        this.form.name=find.name; 
        this.form.mark=find.mark; 
        this.form.type=find.type; 
        this.form.width=find.width; 
      } catch (error) { 
      }
    },
     async onSubmit() {
       const find =  await this.$api.editAdszone(this.form,this.edit_id);   
       this.$parent.$parent.$parent.$parent.handleClose(); 
    },
  },
};
 
</script>